<template>
	<view class="job-container">
		<view class="job-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<view class="head-top">
				<image src="@/static/img/arr.png" mode="" @click="goto"></image>
				<text class="title">找工作</text>
				<view class="head-btn" @click="openswitch">
					<image src="@/static/img/common/swap.png" mode=""></image>
					<text class="btn-name">切换为招聘方</text>
				</view>
			</view>
			<view class="head-search">
				<view class="search-region" @click="open">
					<text class="name">{{ address }}</text>
					<image src="@/static/img/common/xia.png" mode=""></image>
				</view>
				<view class="search-ipt" @click="search(1)">
					<image src="@/static/img/common/searc.png" mode=""></image>
					<text>搜索</text>
				</view>
				<!-- <uni-search-bar style="width: 88%;" v-model="searchValue"  class="uni-mt-10" radius="20" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" /> -->
			</view>
			<view class="head-menu-box">
				<view class="head-menu">
					<view class="menu-item" v-for="(item, index) in data.menuList" :key="index"
						@click="jumpMenu(index)">
						<image :src="`/static/img/common/${item.url}.png`" mode=""></image>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="job-main">
			<view class="main-menu">
				<view :class="navIndex === index ? 'menu-item menu-item-active' : 'menu-item'"
					v-for="(item ,index) in data.navList" :key="index" @click="jumpNav(index)">{{ item.name }}</view>
			</view>
			<scrollView class='scroll' :scrollBoolean="listData.total" :scrollTop="listData.scrollTop"
				:scrollLoad="listData.total > listData.list.length" :refresherRriggered="listData.refresherRriggered"
				@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
				<view class="main-list">
					<view class="list-item" v-for="(item, index) in listData.list" :key="index" @click="jumpItem(item)">
						<view class="item-title">
							<view class="item-sub-title">{{ item.positionName }}</view>
							<view class="item-money">{{ item.money }}</view>
						</view>
						<view class="item-desc">{{ item.workPositionDesc }}</view>
						<view class="item-border">
							<view class="border-item">{{ setName(item.workType) }}</view>
							<view class="border-item">{{ setName1(item.workAddressType) }}</view>
						</view>
						<view class="item-info">
							<view class="info-left">
								<image :src="httpUrl+'/app/file/viewFile?fileId='+item.avatar" mode=""></image>
								<view class="name">{{ item.userName }}
									<!-- <text>·已认证</text> -->
								</view>
							</view>
							<view class="info-right">{{ item.updateTime }}</view>
						</view>
					</view>
				</view>
			</scrollView>
		</view>
		<!-- 区域选择 -->
		<areaSelect ref='areaChoose' @confirm='areaConfirm'></areaSelect>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import commonNavBar from "@/components/commonNavBar.vue";
	import areaSelect from '@/components/area-choose/area-choose.vue'
	import scrollView from "@/components/scrollView.vue";
	import {
		getStatusBarHeight,
		convertToK
	} from '@/utils/common/common.js'
	import api from '@/utils/api/recruit.js'
	import {
		setDialogView
	} from '@/utils/dialogView.ts'
	const barHeight = ref(null)
	onLoad(_ => {
		barHeight.value = getStatusBarHeight()
	})
	onMounted(_ => {
		getList()
		getLocation()
	})
	const httpUrl = getApp().globalData.baseUrl
	// 搜索词
	const searchValue = ref(null)
	const areaChoose = ref(null)
	const address = ref(uni.getStorageSync('city'))
	const navTitle = ref('招人')
	// 菜单数据
	const data = reactive({
		menuList: [{
				name: '我的求职',
				url: 'wdjll'
			},
			{
				name: '我的工作',
				url: 'wdjz'
			},
			{
				name: '消息',
				url: 'wdxx'
			},
		],
		navList: [{
				name: '全部'
			},
			{
				name: '附近'
			},
			{
				name: '最新'
			},
		]
	})
	// 列表数据
	const listData = reactive({
		total: 20, //	总条数
		scrollTop: 0, //	滚动区域
		refresherRriggered: false, //	下拉状态
		pageInfo: {
			pageNo: 1,
			pageSize: 10,
			workProvince: '',
			workCity: '',
			workDistrict: ''
		},
		list: []
	})
	// 栏目点击索引
	const navIndex = ref(0)
	// 搜索
	const search = val => {
		uni.navigateTo({
			url: '/pages/searchPosition/searchPosition?type=' + val
		})
	}
	const setName = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'FULL_TIME':
				return '全职';
			case 'PART_TIME_JOB':
				return '兼职';
			default:
				return '未知';
		}
	}
	const setName1 = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'OFFLINE':
				return '线下';
			case 'ONLINE':
				return '线上';
			default:
				return '未知';
		}
	}
	// 返回上一页
	const goto = _ => {
		uni.navigateBack()
	}
	// 切换类型
	const jumpNav = index => {
		navIndex.value = index;
		listData.pageInfo.queryType = index === 0 ? 'RECOMMEND' : index === 1 ? 'IN_THE_VICINITY' : 'UP_TO_DATE'
		listData.list = []
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10
		getList()
	}
	// 刷新
	const refresherrefresh = _ => {
		listData.refresherRriggered = true;
		listData.list = [];
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10
		getList();
	}
	// 触底事件
	const scrolltolower = _ => {
		if (listData.list.length >= listData.total) return false;
		listData.pageInfo.pageNo++;
		getList();
	}
	const getLocation = () => {
		setDialogView('ACCESS_FINE_LOCATION').then((res) => {
			if (res == 1) {
				uni.getLocation({
					type: 'wgs84', // 默认使用 wgs84 坐标系
					success: (res) => {
						// 获取成功时返回经纬度
						listData.pageInfo.latitude = res.latitude;
						listData.pageInfo.longitude = res.longitude;
						// getList()
					},
					fail: (err) => {
						// listData.pageInfo.latitude = 0;
						// listData.pageInfo.longitude = 0;
						// getList()
						// 获取失败时的回调
						console.error('获取经纬度失败', err);
					}
				});
			}
		})

	}
	// 获取列表
	const getList = async _ => {
		listData.pageInfo.latitude = listData.pageInfo.latitude ? listData.pageInfo.latitude : 0
		listData.pageInfo.longitude = listData.pageInfo.longitude ? listData.pageInfo.longitude : 0
		listData.pageInfo.queryType = 'RECOMMEND'
		const res = await api.queryAllPosition(listData.pageInfo)
		listData.list = listData.list.concat(res.data.list);
		listData.list = listData.list.map(item => {
			return {
				money: `${ convertToK(item.salaryMin) } - ${convertToK(item.salaryMax)}`,
				...item
			}
		})
		listData.total = res.data.total;
		listData.refresherRriggered = false;
	}
	// 职位详情
	const jumpItem = val => {
		uni.navigateTo({
			url: `/pages/jobHunting/jobDetail?data=${JSON.stringify(val)}`
		})
	}
	// 点击菜单
	const jumpMenu = index => {
		if (index === 0) {
			uni.navigateTo({
				url: '/pages/resume/resume'
			})
		} else if (index === 1) {
			uni.navigateTo({
				url: '/pages/myParttimeJob/myParttimeJob'
			})
		} else {
			uni.switchTab({
				url: '/pages/TUIKit/components/TUIConversation/index'
			})
		}

	}
	// 切换招人
	const openswitch = _ => uni.navigateTo({
		url: '/pages/recruit/recruit'
	})
	// 打开区域选择
	const open = _ => areaChoose.value.show()
	const areaConfirm = e => {
		console.log(e);
		address.value = e.addressList[e.addressList.length - 1]
		listData.pageInfo.workProvince = e.addressList[0]
		listData.pageInfo.workCity = e.addressList[1]
		listData.pageInfo.workDistrict = e.addressList[2]
		listData.list = []
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10
		uni.setStorageSync('city', address.value)
		getList()
	}
</script>

<style lang="scss">
	.job-container {
		height: 100vh;
		width: 100%;
		overflow: hidden;
		background: #F4F6FA;

		// height: 100%;
		.job-head {
			width: 100%;
			// height: 431rpx;
			background: url('@/static/img/common/zgzbgs.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.head-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 750rpx;
				height: 88rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 0 32rpx;
				box-sizing: border-box;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.title {
					width: 100%;
					flex: 1;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #333333;
					line-height: 48rpx;
					// text-align: center;
					font-style: normal;
					text-transform: none;
					margin-left: 269rpx;

				}

				.head-btn {
					padding: 8rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					background: rgba(255, 255, 255, 0.9);
					border-radius: 16rpx 16rpx 16rpx 16rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 4rpx;
					}
				}
			}

			.head-search {
				margin: 12rpx 0;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.search-region {
					display: flex;
					align-items: center;
					max-width: 160rpx;

					.name {
						// width: 110rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #262626;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					image {
						width: 36rpx;
						height: 36rpx;
						margin-left: 10rpx;
						flex-shrink: 0;
					}

				}

				.search-ipt {
					background: rgba(255, 255, 255, 0.9);
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					border: 2rpx solid #F4F6FA;
					padding: 11rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					// width: 82%;
					flex: 1;

					image {
						width: 42rpx;
						height: 42rpx;
					}

					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #BFBFBF;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 4rpx;
					}
				}
			}

			.head-menu-box {
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 36rpx;

				.head-menu {
					padding: 41rpx 40rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.menu-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 96rpx;
							height: 96rpx;
						}

						.name {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #262626;
							line-height: 42rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							margin-top: 8rpx;
						}
					}
				}
			}

		}

		.job-main {
			// height: calc(100% - 1200rpx);
			height: calc(100% - 263rpx);
			margin-top: 40rpx;
			padding: 0 24rpx;

			.main-menu {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.menu-item {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #262626;
					line-height: 42rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.menu-item-active {
					background: #FFFFFF !important;
					border-radius: 29rpx 29rpx 29rpx 29rpx;
					color: #6B64D3;
				}

				.menu-item {
					width: 104rpx;
					height: 58rpx;
					background: rgba(255, 255, 255, 0);
					border-radius: 29rpx 29rpx 29rpx 29rpx
				}
			}

			.scroll {
				height: 75%;

				.main-list {
					width: 100%;
					height: 100%;

					.list-item {
						padding: 24rpx;
						box-sizing: border-box;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-bottom: 24rpx;

						.item-title {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.item-sub-title {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 36rpx;
								color: #262626;
								line-height: 54rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							.item-money {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 32rpx;
								color: #6B64D3;
								line-height: 48rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						.item-desc {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #262626;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 16rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.item-border {
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							.border-item {
								padding: 6rpx 16rpx;
								box-sizing: border-box;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 24rpx;
								color: #8C8C8C;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								background: #F4F6FA;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								margin-right: 10rpx;
							}
						}

						.item-info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 24rpx;

							.info-left {
								display: flex;
								align-items: center;

								image {
									width: 48rpx;
									height: 48rpx;
									border-radius: 50%;
								}

								.name {
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 28rpx;
									color: #000000;
									line-height: 42rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-left: 12rpx;
								}
							}

							.info-right {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #8C8C8C;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}
				}
			}
		}
	}
</style>